<template>
  <div class="flv-warp">
    <div :id="'xgVideoFlv' + videoId" class="video"></div>
  </div>
</template>

<script setup>
import {
  defineProps,
  ref,
  defineEmits,
  onMounted,
  onUnmounted,
  watch
} from 'vue'
import FlvJsPlayer from 'xgplayer-flv.js'
import { useRoute } from 'vue-router'
const props = defineProps({
  videoId: {
    type: String,
    default: '0'
  },
  videoPath: {
    type: String,
    require: true
  },
  autoplay: {
    type: Boolean,
    default: true
  }
})
const player = ref(null)
const lastDecodedFrame = ref(0) // 最后一个decodedFrame
const sameCount = ref(0) // decodedFrame不变次数
const destroy = () => {
  if (destroy) {
    player.value.destroy()
    return
  }
  if (player.value && typeof destroy.value.destroy === 'function') {
    player.value.destroy()
  }
}
const emits = defineEmits(['player'])
const initPlayer = (url) => {
  // console.log(props.autoplay)
  if (url && url !== '') {
    player.value = new FlvJsPlayer({
      id: 'xgVideoFlv' + props.videoId,
      url: url,
      isLive: true, // 为true后直接播放
      playsinline: true,
      ignores: ['time', 'play'], // 关闭内置控件
      // controlsList: ["nodownload", "noremoteplayback"], // 控制条选项配置
      //  controls: false, // 关闭控制条
      autoplay: props.autoplay,
      autoplayMuted: true,
      aspectRatio: '16:9', // 比例
      volume: 0,
      width: self.width,
      height: self.height,
      closeVideoClick: true, // 点击暂停
      flvOptionalConfig: {
        enableStashBuffer: false, // 不启用缓存
        autoCleanupSourceBuffer: true, // 自动清除缓存
        reuseRedirectedURL: true // 重用301/302重定向url，用于随后的请求，如查找、重新连接等。
      }
    })
    // emits('player', player.value)
    player.value.emit('player', player.value)
  }
  // 检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
  player.value.on('statistics_info', function (res) {
    // console.log(res.decodedFrames)
    if (lastDecodedFrame.value === 0) {
      lastDecodedFrame.value = res.decodedFrames
      return
    }
    if (lastDecodedFrame.value !== res.decodedFrames) {
      lastDecodedFrame.value = res.decodedFrames
      sameCount.value = 0
    } else {
      sameCount.value++
      if (sameCount.value > 5) {
        // 10秒
        lastDecodedFrame.value = 0
        sameCount.value = 0
        // if (player.value) {
        //   player.value.pause()
        //   //  _self.player.unload();
        //   // _self.player.detachMediaElement();
        //   player.value.destroy()
        //   player.value = null
        // }
        getVideo() // 重新连接
      }
    }
  })
}

const getVideo = () => {
  if (player.value) {
    player.value.src = props.videoPath
  } else {
    initPlayer(props.videoPath)
  }
}
onMounted(() => {
  getVideo()
  document.addEventListener('visibilitychange', function (e) {
    if (e.target.visibilityState === 'visible') {
      getVideo()
    }
  })
})

onUnmounted(() => {
  destroy()
})

watch(
  () => props.videoPath,
  () => {
    getVideo()
  }
)

const route = useRoute()
watch(
  () => route.path,
  (newRoute) => {
    getVideo()
  }
)
</script>

<style lang="scss" scoped>
.flv-warp {
  position: relative;
  width: 100%;
  height: 100%;
  .video {
    position: absolute !important;
    width: 100%;
    height: 100%;
    background: transparent !important;
    border-radius: 0.15625rem;
    box-shadow: var(--el-box-shadow-light);
  }
}
</style>
